import React, { useEffect, useState } from 'react';
import './MyTabble.scss'
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Switch } from 'antd';
import { Input } from 'antd';
import { Button } from 'antd';

interface Props {
    managerList?: any
    columns: any
    children?: any
    selectrowKey: any
}

function MyTabble(props: Props) {


    // 定义可选框
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
        // {将key值传给富组件}
        props.selectrowKey(newSelectedRowKeys)

    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;



    return (
        <div className="search_table">
            <div className='system_'>
                <div className="system_searchbox">
                    {/* {放置搜索按钮插槽} */}
                    {props.children}
                </div>
                <Table columns={props.columns} dataSource={props.managerList} rowSelection={rowSelection} />
            </div>
        </div>

    );
}

export default MyTabble;